<template>
  <div class="about">
   <h3 @click="dialogVisible=true">点击测试</h3>
     <dialong title="小杨同学" width="50%" height="500px" :visible=dialogVisible @maskout="maskout" @colsemask="hadlemask">
         <template slot="main">
            噜啦噜啦嘞绿绿绿绿绿了
            噜啦噜啦嘞绿绿绿绿绿了
            啦啦啦
            啦啦啦
         </template>
         <template slot="footer">
            <button class="btn1" @click="dialogVisible=false">取消</button>
            <button class="btn2" @click="dialogVisible=false">确定</button>
         </template>
     </dialong>
  </div>
</template>
 <script>
// import dialong from "@/components/dialong/dialong"
export default {
  // components: {
  //   dialong,
  // },
  data() {
    return {
      dialogVisible:false
    }
  },
  methods: {
     maskout(value){
    this.dialogVisible=value
     },
    hadlemask(value){
      this.$confirm("确认关闭吗？")
        .then((_) => {
          console.log("回调执行", value);
          this.dialogVisible = value
        })
        .catch((_) => { });
    //  this.dialogVisible=value
     }
  },
  
}
</script>
<style lang="scss" scoped>
h3{
  width: 150px;
  height: 60px;
  border-radius: 5px;
  background-color: pink;
  text-align: center;
  line-height: 60px;
  color: #fff;
}
.btn1,.btn2{
  width: 70px;
  height: 35px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  background-color: skyblue;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  margin-right: 10px;
}
</style>

